<template>
  <div class="secondhand-user-center">
    <!-- 已登录状态 -->
    <div v-if="isLogin">
      <!-- 用户信息卡片 -->
      <div class="user-card">
        <div class="user-info">
          <van-image :src="user.avatar" width="80" height="80" round class="user-avatar" />
          <div class="user-detail">
            <div class="user-name">{{ user.username }}</div>
            <div class="user-extra">
              <van-tag plain type="primary" class="user-tag">
                <van-icon name="diamond-o" /> 会员
              </van-tag>
              <van-tag plain type="warning" class="user-tag">
                <van-icon name="star-o" /> 信用极好
              </van-tag>
            </div>
          </div>
        </div>
      </div>

      <!-- 功能列表 -->
      <div class="function-list">
        <van-cell-group inset>
          <van-cell 
            v-for="(item, i) in cellItems" 
            :key="i" 
            :title="item.title" 
            :icon="item.img" 
            is-link
            :to="{name: item.name}"
            class="function-cell"
          />
        </van-cell-group>
      </div>
			
			

      <!-- 退出登录按钮 -->
      <div class="logout-btn">
        <van-button 
          round 
          block 
          type="default" 
          icon="revoke" 
          @click="onClickLogout"
        >
          退出登录
        </van-button>
      </div>
    </div>

    <!-- 未登录状态 -->
    <div v-else>
      <!-- 未登录提示卡片 -->
      <div class="guest-card">
        <van-image :src="avatar_default" width="80" height="80" round class="guest-avatar" />
        <div class="guest-tip">登录后享受更多服务</div>
        <van-button 
          round 
          type="primary" 
          color="#8b4513" 
          icon="friends-o" 
          to="/login"
          class="login-btn"
        >
          立即登录/注册
        </van-button>
      </div>
    </div>
  </div>
</template>

<script>
import avatar_default from "@/assets/images/avatar_default.png"
import { useUserStore } from '@/stores/user.js';
import { getDetailByIdAPI } from "@/api/user.js";
import { showToast } from 'vant';

export default {
  data() {
    return {
      user: {},
      avatar_default: avatar_default,
      avatar: "",
      isLogin: false,
      cellItems: [
				{
				  title: "我的订单",
				  name: "orderlist",
				  img: "orders-o",
				},
        {
          title: "我的购物车",
          name: "cart",
          img: "orders-o",
        },
        {
          title: "收货地址",
          name: "addressList",
          img: "location-o",
        },
        {
          title: "我的收藏",
          name: "favorite",
          img: "star-o",
        },
        {
          title: "个人资料",
          name: "profile",
          img: "user-o",
        },
        {
          title: "修改密码",
          name: "updatePwd",
          img: "lock",
        },
      ],
    };
  },

  mounted() {
    const userStore = useUserStore();
    this.user = userStore.theUser;
    this.avatar = this.avatar_default;
    this.isLogin = userStore.theToken ? true : false;
  
    if (this.isLogin) {
			this.avatar = this.user.avatar;
    }
  },

  methods: {
    onClickLogout() {
      const userStore = useUserStore();
      userStore.logout();
      this.avatar = this.avatar_default;
      showToast({
        message: "退出成功",
        icon: "passed"
      });
      this.isLogin = false;
    },
  },
};
</script>

<style lang="less" scoped>
.secondhand-user-center {
  background-color: #f9f5ed;
  min-height: 100vh;
  padding-bottom: 20px;
	padding-top: 46px;

  .user-card {
    background-color: white;
    margin: 15px;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    
    .user-info {
      display: flex;
      align-items: center;
      
      .user-avatar {
        border: 2px solid #8b4513;
      }
      
      .user-detail {
        margin-left: 15px;
        
        .user-name {
          font-size: 18px;
          font-weight: bold;
          color: #333;
          margin-bottom: 8px;
        }
        
        .user-extra {
          display: flex;
          
          .user-tag {
            margin-right: 8px;
            font-size: 12px;
            
            .van-icon {
              margin-right: 3px;
            }
          }
        }
      }
    }
    
    .user-stats {
      display: flex;
      justify-content: space-around;
      text-align: center;
      padding: 15px 0;
      border-top: 1px dashed #f0f0f0;
      
      .stat-item {
        flex: 1;
        cursor: pointer;
        
        .stat-value {
          font-size: 18px;
          font-weight: bold;
          color: #8b4513;
          margin-bottom: 5px;
        }
        
        .stat-label {
          font-size: 12px;
          color: #666;
        }
      }
    }
  }

  .function-list {
    margin: 15px 0;
    
    .function-cell {
      /deep/ .van-cell__title {
        font-size: 15px;
        color: #333;
      }
      
      /deep/ .van-icon {
        color: #8b4513;
        font-size: 18px;
        margin-right: 8px;
      }
    }
  }

  .logout-btn {
    margin: 20px 15px 0;
    
    .van-button {
      border-color: #8b4513;
      color: #8b4513;
    }
  }

  .guest-card {
    background-color: white;
    margin: 15px;
    border-radius: 8px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    
    .guest-avatar {
      margin: 0 auto 15px;
      border: 2px solid #f0f0f0;
    }
    
    .guest-tip {
      font-size: 16px;
      color: #666;
      margin-bottom: 20px;
    }
    
    .login-btn {
      width: 200px;
      margin: 0 auto;
    }
  }
}
</style>